<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        人元添加
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/main.css" media="all">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script type="text/javascript" src="lib/loading/okLoading.js"></script>
    <style>
        .imgs {
            display: none;
        }
    </style>

</head>
<body>

<div class="x-body">
    <form class="layui-form layui-form-pane" action="" id="add">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <input type="hidden" name="id" id="id" value="">
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 100px">
                            <span class='x-red'>*</span>所属小区
                        </label>
                        <div class="layui-input-block">
                            <select name="communityId" id="communityId">
                                <option value="0">---请选择---</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 100px">
                            <span class='x-red'>*</span>车位名称
                        </label>
                        <div class="layui-input-block">
                            <input type="text" id="name" name="name" autocomplete="off" placeholder="空制在80个汉字，160个字符以内"
                                   class="layui-input" value="">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: 100px">
                            <span class='x-red'>*</span>状态
                        </label>
                        <div class="layui-input-block">
                            <input type="radio" id="true" name="status" value="1" title="使用中">
                            <div class="layui-unselect layui-form-radio layui-form-radioed"><i
                                    class="layui-anim layui-icon layui-anim-scaleSpring"></i>
                                <div>使用中</div>
                            </div>
                            <input type="radio" id="false" name="status" value="0" title="闲置中">
                            <div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i>
                                <div>闲置中</div>
                            </div>
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <button class="layui-btn" type="button" lay-filter="add" lay-submit="">
                            保存
                        </button>
                    </div>
                    <!--</form>-->
                    <div style="height:100px;"></div>
                </div>


            </div>

        </div>
    </form>
</div>
<script src="js/layui-v2.7.6/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="js/layui-v2.7.6/layui/css/layui.css"/>
<script src="js/jquery.js"></script>
<!--<script type="text/javascript">-->
<!--    //实例化编辑器-->
<!--    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例-->
<!--    // UE.getEditor('content', {initialFrameWidth: 1000, initialFrameHeight: 400,});-->
<!--</script>-->
<script>
    layui.use(['element', 'layer', 'form'], function () {
        $ = layui.jquery;//jquery
        lement = layui.element;//面包导航
        layer = layui.layer;//弹出层
        var form = layui.form;
        okLoading.close($);

        var id = getQueryString("id");
        if (id==null){
            getCommunity_id(null);
            $("#false").attr("checked","checked");
            disabled();
        }else{
            findById(id);
        }

        //监听提交
        form.on('submit(add)', function (data) {
            var name = $("input[name='name']").val();
            var status = $("input[name='status']:checked").val();
            var communityId = $('#communityId option:selected').val();//所属栏目ID

            if (communityId == "") {
                layer.msg('小区名称不能为空', {icon: 5, time: 2000});
                return false;
            }
            if (name == "") {
                layer.msg('车位名称不能为空', {icon: 5, time: 2000});
                return false;
            }
            if (status == "") {
                layer.msg('请选择状态！', {icon: 5, time: 2000});
                return false;
            }
            var data = data.field;
            $.ajax({
                type: "post",
                url: id==null?"../parking/add":"../parking/update",
                data: data,
                dataType: "json",
                success: function (data) {
                    if (data.code == 2000) {
                        layer.msg(data.message, {icon: 6, time: 2000}, function () {
                            window.parent.location.reload();
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        });
                        return false;
                    } else {
                        layer.msg(data.message, {icon: 5, time: 2000});
                        return false;
                    }
                }
            });
        });
    })

    function disabled(){
        document.getElementById("false").disabled=true;
        document.getElementById("true").disabled=true;
        layui.form.render("radio");
    }

    function getQueryString(name) {
        let reg = `(^|&)${name}=([^&]*)(&|$)`
        let r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);return null;
    }

    function findById(id){
        axios.post("../parking/findById?id="+id).then((res)=>{
            var data=res.data.data;
            $("#id").val(data.id);
            $("#name").val(data.name);
            var status=data.status
            console.log(status)
            if (status=="使用中"){
                $("#true").attr("checked","checked");
            }else{
                $("#false").attr("checked","checked");
            }
            getCommunity_id(data.communityId);
            disabled()
        });
    }

    function getCommunity_id(community_id) {
        $.ajax({
            type: "GET",//请求类型
            url: "../community/find",//请求的urlqh
            dataType: "json",//ajax接口（请求url）返回的数据类型
            success: function (data) {//data：返回数据（json对象）
                var options = "<option value='0'>请选择所属小区</option>";
                $("#communityId").html("");
                layui.form.render("select");
                for (var i = 0; i < data.data.length; i++) {
                    if (community_id == data.data[i].id && community_id != null) {
                        options += "<option selected value=\"" + data.data[i].id + "\" class>" + data.data[i].name + "</option>";
                    } else {
                        options += "<option value=\"" + data.data[i].id + "\" class>" + data.data[i].name + "</option>";
                    }
                }
                $("#communityId").append(options);
                layui.form.render("select");
            },
            error: function (data) {//当访问时候，404，500 等非200的错误状态码
                alert("加载所属小区失败！");
            }
        });
    }

</script>
<script src="js/x-layui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.js"></script>
<!--栏目缩略图上传-->
<script>
    function upload() {
        var formData = new FormData();
        formData.append('images', $('#previewImg')[0].files[0]);
        //console.log(formData);
        layer.msg('图片上传中', {icon: 16});
        $.ajax({
            type: "post",
            processData: false,
            contentType: false,
            url: "xxxx",
            data: formData,
            success: function (data) {
                if (data.status == 1) {
                    console.log(data.image_name);
                    layer.closeAll('loading');
                    //layer.msg(data.info,{icon:1,time:1000});
                    $("#pimages").attr('src', data.image_name);
                    $("#avatar").val(data.image_name);
                    $(".imgs").show();
                    return false;
                } else {
                    layer.msg(data.info, {icon: 2, time: 1000});
                }
            }
        });
    }
</script>

</body>
</html>